<!-- src/components/Sidebar.vue -->
<template>
  <el-aside style="background-color: #f5f5f5; padding: 20px;">
    <el-menu>
      <el-menu-item index="1" @click="goFollow">关注</el-menu-item>
      <el-menu-item index="2" @click="goComprehensive">综合</el-menu-item>
      <el-menu-item index="3" @click="goBackend">后端</el-menu-item>
      <el-menu-item index="4" @click="goFrontend">前端</el-menu-item>
      <el-menu-item index="5" @click="goAndroid">Android</el-menu-item>
      <el-menu-item index="6" @click="goIos">iOS</el-menu-item>
      <el-menu-item index="7" @click="goAI">人工智能</el-menu-item>
      <el-menu-item index="8" @click="goTools">开发工具</el-menu-item>
      <el-menu-item index="9" @click="goLife">代码人生</el-menu-item>
      <el-menu-item index="10" @click="goRead">阅读</el-menu-item>
      <el-menu-item index="11" @click="goRank">排行榜</el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const goFollow = () => router.push('/follow');
    const goComprehensive = () => router.push('/comprehensive');
    const goBackend = () => router.push('/backend');
    const goFrontend = () => router.push('/frontend');
    const goAndroid = () => router.push('/android');
    const goIos = () => router.push('/ios');
    const goAI = () => router.push('/ai');
    const goTools = () => router.push('/tools');
    const goLife = () => router.push('/life');
    const goRead = () => router.push('/read');
    const goRank = () => router.push('/rank');

    return {
      goFollow,
      goComprehensive,
      goBackend,
      goFrontend,
      goAndroid,
      goIos,
      goAI,
      goTools,
      goLife,
      goRead,
      goRank,
    };
  },
};
</script>